<template>
  <div class="login-container" >
    <div class="login-wrapper">
    <div class="login" style="position: absolute">
    <div style="position: relative">
    <div class="login-title">
     <h1>桂林医学院保修管理系统</h1>
    </div>
    <el-form class="login-main" ref="form" label-width="80px">
      <h1>欢迎登录</h1>
      <div class="login-name" style="width: 350px">
     <el-form-item label="用户名:">
       <el-input ></el-input>
     </el-form-item>
      </div>

      <div class="login-password" style="width: 350px">
      <el-form-item label="密  码:">
        <el-input ></el-input>
      </el-form-item>
      </div>


      <div style="position: absolute;left: 115px">
        <el-checkbox class="rememberme">记住密码</el-checkbox>
      </div>
      <el-form-item style="width:350px;position: absolute;top: 300px" >
        <el-button type="primary" @click="toHome" style="width:100%;">登录</el-button>
      </el-form-item>
    </el-form>
    </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
    methods:{
        toHome(){
            this.$router.replace('/Home')
        }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-container{
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../assets/bg.png");
  background-size: 100% 100%;
}
  .login-wrapper{
   position: relative;
    width: 100%;
    height: 100%;
  }
  .login-main{
    position: absolute;
    width: 400px;
    height: 400px;
    left: 800px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login-title{
    position: absolute;
    width: 400px;
    left: 840px;
    top: 100px;
  }
  .login{
    left: 300px;
    top: 150px;
  }
</style>
